import { FloatButton } from "antd";
import { Outlet } from "umi";
import { useReactive } from "ahooks";
import { Layout } from "@douyinfe/semi-ui";

import PageLeftMenu from "../components/left.menu";

const { Content } = Layout;

const PageLayout = () => {
    const state = useReactive({
        leftSiderWidth: 200,
    });

    return (
		<Layout style={{ position: "fixed", left: 0, top: 91, width: state.leftSiderWidth, bottom: 0, right: 0 }}>
			<PageLeftMenu onChangeLeftSiderWidth={(newWidth) => (state.leftSiderWidth = newWidth)} />
			<Content id="main-body" style={{ backgroundColor: "var(--semi-color-fill-0)", position: "fixed", left: state.leftSiderWidth, top: 90, right: 0, bottom: 0 }}>
				<Outlet />
				<FloatButton.BackTop visibilityHeight={200} target={() => document.getElementById("main-body")} />
			</Content>
		</Layout>
	);
};

export default PageLayout;
